<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-03-14 14:47:17
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的活动 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>我的收藏</h3>
      </div>
      <div class="box">
        <div class="taps">
          <div
            class="computer"
            :class="{ choseTap: tapRadio == 1 }"
            @click="chosetoZy"
          >
            <h3>资源</h3>
            <span></span>
          </div>
          <div class="fenge"></div>
          <div
            class="wechat1"
            :class="{ choseTap: tapRadio == 2 }"
            @click="chosetoZt"
          >
            <h3>专题</h3>
            <span></span>
          </div>
        </div>
        <!-- 课件资源收藏列表 -->
        <div class="zyCollect" v-if="tapRadio == 1">
          <div class="flTaps">
            <div class="fl">
              <span>分类：</span>
              <span
                v-for="item in fenlei"
                :key="item.id"
                @click="choseFl(item.id)"
                :class="{ choseFl: fl_id == item.id }"
                >{{ item.title }}</span
              >
            </div>
            <div class="lx">
              <span>类型：</span>
              <span @click="choseLxAll" :class="{ choseFl: leixing == '全部' }"
                >全部</span
              >
              <span @click="choseLxJx" :class="{ choseFl: leixing == '精选' }"
                >只看精选</span
              >
            </div>
          </div>
          <div class="caozuo" v-if="!nothingShow">
            <div class="duoxuan">
              <span v-if="!duoxuanShow" @click="duoxuanShow = true"
                ><img src="../../../assets/img/nochose.png"
              /></span>
              <span v-if="duoxuanShow" @click="duoxuanShow = false"
                ><img src="../../../assets/img/chose.png"
              /></span>
              多选
            </div>
            <div class="cancelsc" @click="cancelSc">
              <i class="el-icon-circle-close"></i>
              <span>取消收藏</span>
            </div>
            <div class="cancelsc" @click="fenxiang">
              <i class="el-icon-share"></i>
              <span>分享选中</span>
            </div>
          </div>
          <div class="kejianlist">
            <div class="kejianBox" v-for="item in kejianLists" :key="item.id">
              <div class="chose" v-if="duoxuanShow">
                <span
                  v-if="choseList.indexOf(item.id) == -1"
                  @click="choseKj(item.id, item.title, item.suffix)"
                ></span>
                <span
                  @click="cancelKj(item.id)"
                  v-if="choseList.indexOf(item.id) != -1"
                  :class="{ choseSpan: choseList.indexOf(item.id) != -1 }"
                >
                  <!-- <img src="../../../assets/img/Yssl2.png"/> -->
                  {{ choseList.indexOf(item.id) + 1 }}
                </span>
              </div>
              <div
                class="kejianfile"
                @click="goresDetails(item.id, item.lx, item.suffix)"
              >
                <img
                  src="../../../assets/img/ziyuan.png"
                  v-if="item.lx == 2"
                  style="height: 74px"
                />
                <img
                  src="../../../assets/img/resFile (1).png"
                  alt="file_url"
                  v-if="
                    item.suffix == 'ppt' ||
                    item.suffix == 'pptx' ||
                    item.suffix == 'ppsx' ||
                    item.suffix == 'pps'
                  "
                />
                <img
                  src="../../../assets/img/resFile (2).png"
                  alt="file_url"
                  v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
                />
                <img
                  src="../../../assets/img/resFile (3).png"
                  alt="file_url"
                  v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
                />
                <img
                  src="../../../assets/img/resFile (4).png"
                  alt="file_url"
                  v-if="item.suffix == 'zip' || item.suffix == 'rar'"
                />
                <img
                  src="../../../assets/img/resFile (5).png"
                  alt="file_url"
                  v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
                />
                <img
                  src="../../../assets/img/resFile (6).png"
                  alt="file_url"
                  v-if="item.suffix == 'doc' || item.suffix == 'docx'"
                />
                <img
                  src="../../../assets/img/resFile (7).png"
                  alt="file_url"
                  v-if="item.suffix == 'pdf'"
                />
                <img
                  src="../../../assets/img/resFile (8).png"
                  alt="file_url"
                  v-if="item.suffix == 'png' || item.suffix == 'jpg'"
                />
              </div>
              <div
                class="msg"
                @click="goresDetails(item.id, item.lx, item.suffix)"
              >
                <div class="title">{{ item.title }}</div>
                <!-- <p v-if="!item.lx || item.lx == 1" style="height: 80px">
              {{ item.intro == "" ? "暂无" : item.intro }}
            </p> -->
                <p v-html="item.sub_info" v-if="item.lx == 2"></p>
                <span v-if="item.lx == 2">......</span>
                <div class="bottom">
                  
                  <!-- <span
                  class="upTime"
                  v-if="item.from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span> -->
                  <span
                    class="upTime"
                    v-if="item.tjzs == 0"
                    style="color: #999999"
                  >
                    <a style="color: #f25555">*</a> 暂无评星
                  </span>
                  <span class="rate" v-if="item.tjzs > 0"
                    ><span style="margin-right: 5px">精选指数</span>
                    <el-rate disabled v-model="item.tjzs"></el-rate
                  ></span>
                  <span class="seeNum" v-if="!item.lx || item.lx == 1"
                    ><i class="el-icon-view"></i>{{ item.viewCount }}</span
                  >
                  <span class="seeNum" v-if="item.lx == 2"
                    ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                  >
                  <span class="upTime" >
                    {{ timeStamp2String(item.sc_time * 1000, 2) }}
                  </span>
                </div>
              </div>
              <div
                class="downLoad"
                @click="goresDetails(item.id, item.lx, item.suffix)"
              >
                查看全部
              </div>
            </div>
          </div> 
        </div>
        <!-- 资源包专题收藏列表 -->
        <div class="ztCollect" v-if="tapRadio == 2">
          <div class="caozuo" v-if="!nothingShow">
            <div class="duoxuan">
              <span v-if="!duoxuanShow" @click="duoxuanShow = true"></span>
              <span v-if="duoxuanShow" @click="duoxuanShow = false"
                ><img src="../../../assets/img/Yssl2.png" alt=""
              /></span>
              多选
            </div>
            <div class="cancelsc">
              <i class="el-icon-circle-close"></i>
              <span @click="cancelScZt">取消收藏</span>
            </div>
          </div>
          <div class="kejianlist">
            <div class="kejianBox" v-for="item in choseZtListL" :key="item.id">
              <div class="chose" v-if="duoxuanShow">
                <span
                  v-if="choseListZt.indexOf(item.id) == -1"
                  @click="choseZt(item.id)"
                ></span>
                <span
                  @click="cancelZt(item.id)"
                  v-if="choseListZt.indexOf(item.id) != -1"
                  ><img src="../../../assets/img/Yssl2.png" alt=""
                /></span>
              </div>
              <div class="kejianfile" @click="gorbeikeziyuan(item.id)">
                <img src="../../../assets/img/ziyuanbaonew.png" />
              </div>
              <div class="msg">
                <div class="title" @click="gorbeikeziyuan(item.id)">
                  {{ item.title }}
                </div>
                <p v-html="item.sub_info" v-if="item.lx == 2"></p>
                <span v-if="item.lx == 2">......</span>
                <div class="bottom">
                  <span>
                    <div class="zynum">
                      内含<a>{{ item.kejian_nums }}份</a>资源
                    </div>
                  </span>
                </div>
              </div>
              <div class="downLoad" @click="singleCancel(item.id)">
                取消收藏
              </div>
            </div>
          </div>
        </div>
        <div class="page1" v-if="!nothingShow">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-sizes="[10, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="retCounts"
          >
          </el-pagination>
        </div>
        <div class="nothing" v-if="nothingShow">
          <img src="../../../assets/img/nothing.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 订阅关注 多个-->
    <el-dialog
      :visible.sync="dialogVisible"
      width="440px"
      :before-close="handleClose"
      custom-class="guanzhu"
    >
      <div class="fxbox" ref="imageDom">
        <h2>资源分享</h2>
        <div class="fxlist">
          <span>为您推荐</span>
          <p v-for="(item, index) in fenxiangList" :key="item.id">
            {{ index + 1 }}、{{ item.title }}
          </p>
        </div>
        <div class="erweim">
          <div class="pic">
            <img :src="fxevm" alt="" />
          </div>
          <div class="intro">
            <p>手机扫描二维码</p>
            <p>移动端获取全部资源</p>
          </div>
        </div>
        <!-- 生成短链接 -->
        <div class="caozuo">
          <div class="savePic" @click="clickGeneratePicture">
            保存图片到本地
          </div>
          <div class="copyUrl" @click="getUrl">复制分享链接</div>
        </div>
      </div>
    </el-dialog>
    <!-- 订阅关注 单个-->
    <el-dialog
      :visible.sync="dialogVisible1"
      width="440px"
      :before-close="handleClose"
      custom-class="guanzhu"
    >
      <div class="fxbox" ref="imageDom">
        <h2>资源分享</h2>
        <div class="file" v-for="item in fenxiangList" :key="item.id">
          <img
            src="../../../assets/img/resFile (1).png"
            alt="file_url"
            v-if="
              item.suffix == 'ppt' ||
              item.suffix == 'pptx' ||
              item.suffix == 'ppsx' ||
              item.suffix == 'pps'
            "
          />
          <img
            src="../../../assets/img/resFile (2).png"
            alt="file_url"
            v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
          />
          <img
            src="../../../assets/img/resFile (3).png"
            alt="file_url"
            v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
          />
          <img
            src="../../../assets/img/resFile (4).png"
            alt="file_url"
            v-if="item.suffix == 'zip' || item.suffix == 'rar'"
          />
          <img
            src="../../../assets/img/resFile (5).png"
            alt="file_url"
            v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
          />
          <img
            src="../../../assets/img/resFile (6).png"
            alt="file_url"
            v-if="item.suffix == 'doc' || item.suffix == 'docx'"
          />
          <img
            src="../../../assets/img/resFile (7).png"
            alt="file_url"
            v-if="item.suffix == 'pdf'"
          />
          <img
            src="../../../assets/img/resFile (8).png"
            alt="file_url"
            v-if="item.suffix == 'png' || item.suffix == 'jpg'"
          />
          <p>{{ item.title }}</p>
        </div>

        <div class="erweim">
          <div class="pic">
            <img :src="fxevm" alt="" />
          </div>
          <div class="intro">
            <p>手机扫描二维码</p>
            <p>移动端获取全部资源</p>
          </div>
        </div>
        <!-- 生成短链接 -->
        <div class="caozuo">
          <div class="savePic" @click="clickGeneratePicture">
            保存图片到本地
          </div>
          <div class="copyUrl" @click="getUrl">复制分享链接</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { timeStamp2String } from "../../../utils/time";
import html2canvas from "html2canvas";
import {
  activitylists_my,
  nowkemu,
  kejianfl,
  list_accountzysc,
  list_accountzysc_kejianbao,
  create_accountzysc,
  getxcxewm,
  getdlj,
  create_temptext,
  info_temptext,
} from "../../../api/http";
export default {
  name: "changeClass",
  props: ["title","msg"],
  components: {},
  data() {
    return {
      imgUrl: "", //
      timeStamp2String,
      nianji_id: "", //当前年级id
      activeList: [], //我的活动列表
      currentPage: 1,
      tapRadio: 1, //当前tap值
      jyjxtype_id: 401, //教研或者教学
      page: 1, //页数
      page_size: 10, //每页数
      retCounts: 0, //总数据数
      nothingShow: false, //空图的显示隐藏
      value: "", //搜索内容
      fenlei: [], //分类列表
      fl_id: 0, //分类id
      leixing: "全部",
      kejianLists: [], //资源列表
      duoxuanShow: false, //是否开启多选功能
      choseList: [], //选中的资源
      from_int: 0,
      choseZtListL: [], //资源包列表
      choseListZt: [], //选中的资源包
      dialogVisible: false, //分享弹窗多个
      dialogVisible1: false, //分享弹窗单个
      fenxiangList: [], //分享列表
      fxid: [], //分享列表的id
      fxevm: "", //分享二维码
      kemu_id: "", //科目id
      kejianversions_id: "", //版本id
    };
  },
  created() {
    nowkemu({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      this.nianji_id = res.retRes.nianji_id;
      this.kemu_id = res.retRes.kemu_id;
      this, (this.kejianversions_id = res.retRes.kejianversions_id);
      kejianfl({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.nianji_id,
      }).then((res) => {
        const alltap = {
          id: 0,
          systypes_id: 1,
          title: "全部",
        };
        this.fenlei = res.retRes;
        this.fenlei.unshift(alltap);
      });
    });
    this.zygetData();
    
  },
  mounted(){
    // setTimeout(()=>{
    //   console.log(this.title,this.msg);
    // },1000)
  },
  methods: {
    clickGeneratePicture() {
      html2canvas(this.$refs.imageDom).then((canvas) => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png");
        console.log(this.imgUrl);
        var eleLink = document.createElement("a");
        eleLink.href = this.imgUrl; // 转换后的图片地址
        eleLink.download = "资源分享图";
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });
    },
    //获取资源收藏列表
    zygetData() {
      list_accountzysc({
        md5key: localStorage.getItem("md5key"),
        from_int: this.from_int,
        kejianfl_id: this.fl_id,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        console.log(res, "资源收藏列表");
        this.kejianLists = res.retRes;
        this.retCounts = res.retCounts;
        if (res.retCounts > 0) {
          this.nothingShow = false;
        } else {
          this.nothingShow = true;
        }
      });
    },
    //获取专题资源包收藏列表
    ztgetData() {
      list_accountzysc_kejianbao({
        md5key: localStorage.getItem("md5key"),
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        console.log(res, "资源包专题收藏列表");
        this.retCounts = res.retCounts;
        this.choseZtListL = res.retRes;
        if (res.retCounts > 0) {
          this.nothingShow = false;
        } else {
          this.nothingShow = true;
        }
      });
    },
    //切换至资源
    chosetoZy() {
      this.tapRadio = 1;
      this.jyjxtype_id = 401;
      this.value = "";
      this.page = 1;
      this.page_size = 10;
      this.zygetData();
    },
    //切换至专题
    chosetoZt() {
      this.tapRadio = 2;
      this.jyjxtype_id = 402;
      this.value = "";
      this.page = 1;
      this.page_size = 10;
      this.ztgetData();
    },
    //切换分类
    choseFl(id) {
      this.fl_id = id;
      this.zygetData();
    },
    //切换全部类型
    choseLxAll() {
      this.leixing = "全部";
      this.from_int = 0;
      this.zygetData();
    },
    //切换精选类型
    choseLxJx() {
      this.leixing = "精选";
      this.from_int = 10;
      this.zygetData();
    },
    //点击课件前往课件详情
    goresDetails(id, lx, suffix) {
      console.log(id, lx);
      //有分类型，并且类型为贝壳资源包
      if (lx && lx == 2 && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/beikeziyuan",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
          },
        });
        window.open(href, "_blank");
        //有分类型，并且类型为课件
      } else if (lx && lx == 1 && suffix != "rar" && suffix != "zip") {
        // console.log("推荐课件")
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
          },
        });
        window.open(href, "_blank");
        //非推荐，全部为正常课件
      } else if (!lx && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
          },
        });
        window.open(href, "_blank");
      } else if (suffix == "rar" || suffix == "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/zipResDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
          },
        });
        window.open(href, "_blank");
      }
    },
    //点击前往课件包详情
    gorbeikeziyuan(id) {
      let { href } = this.$router.resolve({
        path: "/resource/beikeziyuan",
        query: {
          id: id,
          gundongTop: document.documentElement.scrollTop,
          mb_bookTitle: this.mb_bookTitle, //书本名
          mb_muluTitle: this.mb_muluTitle, //书本目录名
          // mb_kewenTitle: this.mb_kewenTitle, //课文名
          mb_tapTitle: this.mb_tapTitle, //分类名
          mb_tagTitle: this.mb_tagTitle, //标签名
          bookid: this.kejianbooks_id, //书本id
          muluid: this.kejianchapters_id, //目录id
          fenleiid: this.kejianfl_id, //分类id
          tgid: this.kejiantag_id, //标签id
          njid: this.nianji_id, //选择书本的年级id
          typeid: this.systypes_id, //分类的大类型id
          searchTitle: this.searchTitle, //搜索名
          index: this.bookIndex, //第几本书
          mb_page: this.mb_page, //第几页
        },
      });
      window.open(href, "_blank");
    },
    //选中课件
    choseKj(id, title, suffix) {
      // console.log(this.choseList.indexOf(id) == -1)
      if (this.choseList.indexOf(id) == -1) {
        this.choseList.push(id);
        let fxtitle = { id: id, title: title + "." + suffix, suffix: suffix };
        this.fenxiangList.push(fxtitle);
        this.fxid.push(id);
        // console.log(JSON.stringify(...this.fxid))
        // console.log(...this.fxid)
        // console.log(this.fenxiangList)
      }
    },
    //取消选中课件
    cancelKj(id) {
      this.choseList.splice(this.choseList.indexOf(id), 1);
      this.fxid.splice(this.fxid.indexOf(id), 1);
      this.fenxiangList.forEach((item, index) => {
        if (item.id == id) {
          this.fenxiangList.splice(index, 1);
        }
      });
    },
    //选中资源包
    choseZt(id) {
      if (this.choseListZt.indexOf(id) == -1) {
        this.choseListZt.push(id);
      }
    },
    //取消选中资源包
    cancelZt(id) {
      this.choseListZt.splice(this.choseListZt.indexOf(id), 1);
    },
    //取消收藏资源
    cancelSc() {
      if (this.choseList.length > 0) {
        //提示弹窗
        this.$confirm("确认要取消收藏选中的资源吗？?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            create_accountzysc({
              md5key: localStorage.getItem("md5key"),
              ids: this.choseList,
              type_id: 1,
              status: 2,
            }).then((res) => {
              if (res.retInt == 1) {
                this.zygetData();
              }
            });
          })
          .catch(() => {
            this.$notify({
              message: "已取消操作",
              duration: 2000,
              showClose: false,
            });
          });
      } else {
        this.$notify({
          message: "请先选择资源",
          duration: 2000,
          showClose: false,
        });
      }
    },
    //取消收藏资源包
    cancelScZt() {
      if (this.choseListZt.length > 0) {
        create_accountzysc({
          md5key: localStorage.getItem("md5key"),
          ids: this.choseListZt,
          type_id: 2,
          status: 2,
        }).then((res) => {
          if (res.retInt == 1) {
            this.ztgetData();
          }
        });
      } else {
        this.$notify({
          message: "请先选择资源",
          duration: 2000,
          showClose: false,
        });
      }
    },
    //分享选中
    fenxiang() {
      if (this.fxid.length <= 0) {
        this.$notify({
          message: "请先选择资源",
          duration: 2000,
          showClose: false,
        });
        this.dialogVisible = false;
        this.dialogVisible1 = false;
        // console.log(123)
      } else if (this.fxid.length == 1) {
        this.dialogVisible1 = true;
        this.dialogVisible = false;
        let strid = "";
        this.fxid.forEach((item, index) => {
          if (index != this.fxid.length - 1) {
            strid += item + "_";
          } else {
            strid += item;
          }
        });
        create_temptext({
          contents: strid,
        }).then((res) => {
          console.log(res, "字符串");
          const lsStringId = res.retRes.id;
          console.log(lsStringId, "12123");
          getxcxewm({
            md5key: localStorage.getItem("md5key"),
            scene: "ids=" + lsStringId,
            // scene:"ids="+encodeURIComponent(this.fenxiangList),
            // scene:"ids="+encodeURIComponent(str),
            page: "page_myself/pages/scShare/scShare",
            // page:'pages/index/index',
            env_version: "trial",
          }).then((res) => {
            console.log(res);
            this.fxevm = res.retRes.file_url;
          });
        });
      } else if (this.fxid.length >= 1 && this.fxid.length <= 10) {
        this.dialogVisible = true;
        this.dialogVisible1 = false;
        let strid = "";
        this.fxid.forEach((item, index) => {
          if (index != this.fxid.length - 1) {
            strid += item + "_";
          } else {
            strid += item;
          }
        });
        create_temptext({
          contents: strid,
        }).then((res) => {
          // console.log(res,"字符串")
          const lsStringId = res.retRes.id;
          console.log(lsStringId, "12123");
          getxcxewm({
            md5key: localStorage.getItem("md5key"),
            scene: "ids=" + lsStringId,
            // scene:"ids="+encodeURIComponent(this.fenxiangList),
            // scene:"ids="+encodeURIComponent(str),
            page: "page_myself/pages/scShare/scShare",
            // page:'pages/index/index',
            env_version: "trial",
          }).then((res) => {
            console.log(res);
            this.fxevm = res.retRes.file_url;
          });
        });
      } else if (this.fxid.length > 10) {
        this.$alert("一次最多可以分享10个哦", "温馨提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `请重新选择`,
            });
          },
        });
        this.dialogVisible = false;
        this.dialogVisible1 = false;
      }
    },
    //复制分享链接
    getUrl() {
      let that = this;
      let strid = "";
      this.fxid.forEach((item, index) => {
        if (index != this.fxid.length - 1) {
          strid += item + "&";
        } else {
          strid += item;
        }
      });
      this.$copyText(
        this.$globalUrl + "/pc/resource/resAllfx?ids="+encodeURIComponent(JSON.stringify(this.fxid)) + '&kemu_id='+this.kemu_id + '&banben='+this.kejianversions_id + '&title='+this.title
        // this.$globalUrl + "/pc/resource/resAllfx?ids=" +
        //   encodeURIComponent(JSON.stringify(this.fxid)) +
        //   "&kemu_id=" +
        //   this.kemu_id +
        //   "&banben=" +
        //   this.kejianversions_id +
        //   "&title=" +
        //   this.title
      ).then(
        (e) => {
          that.$message({
            message: "复制成功",
            type: "success",
          });
        },
        (e) => {
          that.$message({
            message: "复制失败",
          });
        }
      );
      // getdlj({
      //   page_url:
      //     "page_myself/pages/scShare/scShare?ids=" +
      //     encodeURIComponent(this.fxid),
      //   page_title: "我的收藏",
      //   is_permanent: 1,
      // }).then((res) => {
      //   console.log(res);
      // });
    },
    //关闭分享框
    handleClose() {
      this.dialogVisible = false;
      this.dialogVisible1 = false;
    },
    //资源包单个取消
    singleCancel(id) {
      let ztCancelList = [];
      ztCancelList.push(id);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ztCancelList,
        type_id: 2,
        status: 2,
      }).then((res) => {
        if (res.retInt == 1) {
          this.ztgetData();
        }
      });
    },
    //分页
    handleSizeChange(val) {
      this.page_size = val;
      if (this.tapRadio == 1) {
        this.zygetData();
      } else {
        this.ztgetData();
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      //获取我的活动列表数据
      if (this.tapRadio == 1) {
        this.zygetData();
      } else {
        this.ztgetData();
      }
    },
  },
};
</script>
<style>
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 740px;
  margin: 0 auto;
  margin-top: 40px;
}
.el-pagination {
  text-align: center;
  /* margin: 20px 80px 20px 0; */
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
.el-button--primary {
  background-color: #08a579;
  border-color: #08a579;
}
</style>
<style lang="less" scoped>
#container {
  .content {
    .nothing {
      margin-top: 100px;
      text-align: center;
      img {
        // width: 400px;
      }
    }
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .box {
      margin-left: 0px;
      .taps {
        position: relative;
        display: flex;
        align-items: center;
        margin-left: 30px;
        height: 38px;
        border-bottom: 1px solid #e6e6e6;
        overflow: hidden;
        .computer {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 53px 0px 20px;
          cursor: pointer;
          h3 {
            padding-bottom: 10px;
            color: #939599;
            font-size: 14px;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
            border-radius: 10px;
          }
        }
        .fenge {
          margin-bottom: 10px;
          width: 1px;
          height: 16px;
          background: #e1e2e6;
        }
        .wechat1 {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 0px 0px 53px;
          cursor: pointer;
          h3 {
            padding-bottom: 10px;
            color: #939599;
            font-size: 14px;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
            border-radius: 10px;
          }
        }
        //活动样式
        .choseTap {
          h3 {
            font-size: 16px;
            color: #333;
          }
          span {
            background: #08a579;
          }
        }
        .search {
          position: relative;
          position: absolute;
          top: 0px;
          right: 30px;
          input {
            padding-left: 30px;
            width: 170px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #c4c7cc;
            border-radius: 16px;
            outline: none;
          }
          i {
            position: absolute;
            top: 7px;
            left: 10px;
            font-size: 18px;
            color: #c4c7cc;
          }
        }
      }
      .zyCollect {
        .flTaps {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 30px;
          margin-top: 20px;
          width: 840px;
          height: 106px;
          background: #f5f7fa;
          border-radius: 10px;
          span {
            padding: 4px 15px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
          }
          .fl {
            margin-top: 20px;
          }
          .choseFl {
            background-color: #e8fbf6;
            color: #08a579;
            border-radius: 2px;
          }
          .lx {
            margin-bottom: 20px;
          }
        }
        .caozuo {
          display: flex;
          align-items: center;
          margin-left: 30px;
          padding: 20px 0;
          font-size: 12px;
          color: #999;
          border-bottom: 1px solid #e6e6e6;
          .duoxuan {
            display: flex;
            align-items: center;
            span {
              position: relative;
              display: inline-block;
              margin-right: 5px;
              width: 18px;
              height: 18px;
              // border: 1px solid #999999;
              // border-radius: 4px;
              cursor: pointer;
              img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 18px;
              }
            }
          }
          .cancelsc {
            display: flex;
            align-items: center;
            // justify-content: space-around;
            margin-left: 30px;
            width: 88px;
            height: 28px;
            border: 1px solid #999999;
            border-radius: 2px;
            cursor: pointer;
            i {
              margin-left: 10px;
              margin-right: 4px;
              font-size: 18px;
            }
          }
        }
        .kejianlist {
          margin-left: 30px;
          width: 800px;
          // height: 800px;
          // -ms-overflow-style: none; /* IE 10+ */
          // scrollbar-width: none; /* Firefox */
          // overflow-y: scroll;
          .kejianBox {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 0;
            // padding-bottom: 20px;
            border-bottom: 1px dashed #e6e6e6;
            cursor: pointer;
            .chose {
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              span {
                position: relative;
                display: inline-block;
                margin-right: 5px;
                width: 16px;
                height: 16px;
                border: 1px solid #999999;
                border-radius: 4px;
                // img {
                //   position: absolute;
                //   top: 50%;
                //   left: 50%;
                //   transform: translateX(-50%) translateY(-50%);
                //   width: 14px;
                // }
                text-align: center;
                font-size: 12px;
                // font-weight: 600;
                color: #fff;
                line-height: 16px;
              }
              .choseSpan {
                border-color: #08a579;
                background: #08a579;
              }
            }
            .kejianfile {
              margin-left: 60px;
              text-align: center;
              width: 60px;
              img {
                width: 60px;
                vertical-align: top;
              }
            }
            .msg {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 20px;
              border-right: 1px solid #e6e6e6;
              cursor: pointer;
              .title {
                // margin-bottom: 20px;
                // margin-top: 8px;
                width: 440px;
                font-size: 15px;
                font-weight: 900;
                color: #333;
                overflow: hidden;
                white-space: wrap;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3; /*想省略几行就写几*/
                -webkit-box-orient: vertical;
              }
              p {
                width: 480px;
                // min-height: 80px;
                line-height: 20px;
                font-size: 13px;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
              }
              .bottom {
                display: flex;
                align-items: center;
                margin-top: 15px;
                // position: relative;
                // top: 80px;
                color: #999;
                .upTime {
                  margin-left: 40px;
                }
                .rate {
                  display: flex;
                  margin-right: 38px;
                  width: 148px;
                }
                /deep/.el-rate__icon {
                  margin-right: 0;
                }
                .seeNum {
                  i {
                    margin-right: 5px;
                  }
                }
              }
            }
            .downLoad {
              margin: 0px 30px 0 30px;
              width: 96px;
              height: 28px;
              color: #fff;
              text-align: center;
              line-height: 28px;
              background: #08a579;
              border-radius: 14px;
              background: #08a579;
              border-radius: 14px;
              cursor: pointer;
            }
            .jiaoyan {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              padding: 30px 0 10px 0;
              width: 1200px;
              .box {
                margin-bottom: 20px;
                background-color: #fff;
                border-radius: 10px;
                cursor: pointer;
                img {
                  margin-bottom: 10px;
                  width: 360px;
                  height: 203px;
                  border-radius: 10px;
                }
                .activename {
                  margin-bottom: 18px;
                  width: 320px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  color: #333333;
                }
                p {
                  font-size: 14px;
                  color: #939599;
                }
              }
              .box:hover {
                // transition: 1s;
                img {
                  transition: 0.5s;
                  // position: relative;
                  // top: -10px;
                  transform: translateY(-10px);
                  box-shadow: 0px 2px 10px 2px #dedede;
                }
                .activename {
                  color: #08a579;
                }
              }
            }
          }
        }
      }
      .ztCollect {
        .caozuo {
          display: flex;
          align-items: center;
          margin-left: 30px;
          padding: 20px 0;
          font-size: 12px;
          color: #999;
          border-bottom: 1px solid #e6e6e6;
          .duoxuan {
            display: flex;
            align-items: center;
            span {
              position: relative;
              display: inline-block;
              margin-right: 5px;
              width: 16px;
              height: 16px;
              border: 1px solid #999999;
              border-radius: 4px;
              cursor: pointer;
              img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 14px;
              }
            }
          }
          .cancelsc {
            display: flex;
            align-items: center;
            // justify-content: space-around;
            margin-left: 30px;
            width: 88px;
            height: 28px;
            border: 1px solid #999999;
            border-radius: 2px;
            cursor: pointer;
            i {
              margin-left: 10px;
              margin-right: 4px;
              font-size: 18px;
            }
          }
        }
        .kejianlist {
          margin-left: 30px;
          width: 800px;
          .kejianBox {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 0;
            // padding-bottom: 20px;
            border-bottom: 1px dashed #e6e6e6;
            cursor: pointer;
            .chose {
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              span {
                position: relative;
                display: inline-block;
                margin-right: 5px;
                width: 16px;
                height: 16px;
                border: 1px solid #999999;
                border-radius: 4px;
                img {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%) translateY(-50%);
                  width: 14px;
                }
              }
            }
            .kejianfile {
              margin-left: 60px;
              text-align: center;
              width: 60px;
              img {
                width: 60px;
                vertical-align: top;
              }
            }
            .msg {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 20px;
              border-right: 1px solid #e6e6e6;
              cursor: pointer;
              .title {
                margin-bottom: 20px;
                // margin-top: 8px;
                width: 440px;
                font-size: 15px;
                font-weight: 900;
                color: #333;
                overflow: hidden;
                white-space: wrap;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3; /*想省略几行就写几*/
                -webkit-box-orient: vertical;
              }
              p {
                width: 480px;
                // min-height: 80px;
                line-height: 20px;
                font-size: 13px;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
              }
              .bottom {
                margin-top: 10px;
                // position: relative;
                // top: 80px;
                color: #939599;
                .zynum {
                  a {
                    color: #f6444e;
                  }
                }
                .upTime {
                  margin-right: 40px;
                }
                .seeNum {
                  i {
                    margin-right: 5px;
                  }
                }
              }
            }
            .downLoad {
              margin: 0px 30px 0 30px;
              width: 96px;
              height: 28px;
              color: #fff;
              text-align: center;
              line-height: 28px;
              background: #08a579;
              border-radius: 14px;
              background: #08a579;
              border-radius: 14px;
              cursor: pointer;
            }
            .jiaoyan {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              padding: 30px 0 10px 0;
              width: 1200px;
              .box {
                margin-bottom: 20px;
                background-color: #fff;
                border-radius: 10px;
                cursor: pointer;
                img {
                  margin-bottom: 10px;
                  width: 360px;
                  height: 203px;
                  border-radius: 10px;
                }
                .activename {
                  margin-bottom: 18px;
                  width: 320px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  color: #333333;
                }
                p {
                  font-size: 14px;
                  color: #939599;
                }
              }
              .box:hover {
                // transition: 1s;
                img {
                  transition: 0.5s;
                  // position: relative;
                  // top: -10px;
                  transform: translateY(-10px);
                  box-shadow: 0px 2px 10px 2px #dedede;
                }
                .activename {
                  color: #08a579;
                }
              }
            }
          }
        }
      }
      .page1 {
        width: 700px;
        margin: 0 auto;
      }
      .el-pagination {
        text-align: center;
        margin: 20px 80px 20px 0;
      }
    }
  }
  /deep/.el-dialog {
    border-radius: 20px;
  }
  .guanzhu {
    .fxbox {
      // position: relative;
      background-image: url("../../../assets/img/fxbg.png");
      background-repeat: no-repeat;
      border-radius: 20px;
      .file {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          margin-bottom: 35px;
          width: 59px;
        }
      }
      .caozuo {
        display: flex;
        // align-items: center;
        justify-content: space-around;
        position: absolute;
        bottom: -120px;
        left: 0;
        width: 440px;
        height: 140px;
        background-image: url("../../../assets/img/zyfxbottom.png");
        background-repeat: no-repeat;
        .copyUrl {
          margin-top: 70px;
          width: 160px;
          height: 40px;
          background: #08a579;
          border-radius: 20px;
          z-index: 100000;
          color: #fff;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
        .savePic {
          margin-top: 70px;
          width: 160px;
          height: 40px;
          background: #08a579;
          border-radius: 20px;
          z-index: 100000;
          color: #fff;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }
    h2 {
      padding: 30px 0;
      text-align: center;
      font-size: 20px;
      color: #333333;
    }
    .fxlist {
      margin: 0 auto;
      padding-bottom: 30px;
      width: 375px;
      font-size: 14px;
      color: #333333;
      line-height: 26px;
      border-bottom: 1px solid #dee0e3;
    }
    .erweim {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .pic {
        margin-right: 80px;
        margin-left: 32.5px;
        width: 120px;
        img {
          width: 120px;
          height: 120px;
        }
      }
      p {
        text-align: center;
        font-weight: 600;
        color: #333;
        line-height: 36px;
        font-size: 14px;
      }
    }
  }

  /deep/.el-dialog__header {
    padding: 0;
  }
  /deep/.el-dialog__body {
    padding: 0;
    padding-bottom: 30px;
  }
}
</style>